<!-- For help on using this template, see the blog post: https://blog.mturk.com/editing-the-survey-link-project-template-in-the-ui-7c75285105fb#.py7towsdx --><!-- HIT template: SurveyLink-v3.0 --><!-- The following snippet enables the 'responsive' behavior on smaller screens -->
<meta content="width=device-width,initial-scale=1" name="viewport" /><!-- Actual Content to show after accepting the hit-->
<div id="hit-container" style="display: none;">
<div id="hit-instruction">
<div class="panel panel-primary">
<div class="panel-body" id="instructionBody">
<h3><b>Attention</b></h3>

<p>Some of these choices will be very clear, but others will require you to use your best judgment. We undrstand that in many cases it will be hard to tell what the "right" choice is. Use your best judgement, but please be attentive. <b>We have randomly mixed in a number of gold-standard HITs whose answers are less ambiguous to evaluate the quality of your work.</b> If you miss a large number of gold-standard HITs, you may be <b>blocked</b> from continued participation in this study (and future studies).</p>

<p>After you've done a relatively large number of HITs of a specific task structure, your qualification might be temporarily surpressed. This does not mean you've done anything wrong, but we need to ensure that a variety of workers complete our tasks. This is <b>NOT a block</b> and will have <b>NO negative impact</b> on you Mturk record.</p>

<h3><b>Instructions</b></h3>

<p>For each HIT, you will see <b>four</b> sets of words. Three of them will be related to each other, but <b>one word set will be out of place</b>. Your job is to pick up the one word grouping that <b>does NOT belong with the others</b></p>

<h3><b>Background</b></h3>

<p>The words you see are taken from U.S. senators' official Facebook postings. These postings can be on any issue or topic. Some postings are about certain legislation, some are about federal or statewide events, and some are about the administration, etc.</p>

</div>
</div>
</div>

<div id="SurveyLink"><!-- Instructions -->
<div id="workContent">

<p><strong>Please click on the word set below that is most UNRELATED to the other three.</strong></p>

<div class="radio"><label><input name="radio" type="radio" id="radio1" value="1"/>${word1}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio2" value="2"/>${word2}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio3" value="3"/>${word3}</label></div>

<div class="radio"><label><input name="radio" type="radio" id="radio4" value="4"/>${word4}</label></div>

</div>
</div>
</div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" /><!-- Preview Content -->
<div id="preview" style="display: none;">
<div id="hit-instruction">
<div class="panel panel-primary">
<div class="panel-body" id="instructionBody">
<h3><b>Attention</b></h3>

<p>Some of these choices will be very clear, but others will require you to use your best judgment. We undrstand that in many cases it will be hard to tell what the "right" choice is. Use your best judgement, but please be attentive. <b>We have randomly mixed in a number of gold-standard HITs whose answers are less ambiguous to evaluate the quality of your work.</b> If you miss a large number of gold-standard HITs, you may be <b>blocked</b> from continued participation in this study (and future studies).</p>

<p>After you've done a relatively large number of HITs of a specific task structure, your qualification might be temporarily surpressed. This does not mean you've done anything wrong, but we need to ensure that a variety of workers complete our tasks. This is <b>NOT a block</b> and will have <b>NO negative impact</b> on you Mturk record.</p>

<h3><b>Instructions</b></h3>

<p>For each HIT, you will see <b>four</b> sets of words. Three of them will be related to each other, but <b>one word set will be out of place</b>. Your job is to pick up the one word grouping that <b>does NOT belong with the others</b></p>

<h3><b>Background</b></h3>

<p>The words you see are taken from U.S. senators' official Facebook postings. These postings can be on any issue or topic. Some postings are about certain legislation, some are about federal or statewide events, and some are about the administration, etc.</p>
</div>
</div>
</div>

<div id="SurveyLink"><!-- Instructions -->
<div id="workContent">

<p><strong>Please click on the word set below that is most UNRELATED to the other three.</strong></p>

<div class="radio"><label><input name="radio" type="radio" id = "radio1" value="1"/>Option 1</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio2" value="2"/>Option 2</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio3" value="3"/>Option 3</label></div>

<div class="radio"><label><input name="radio" type="radio" id = "radio4" value="4"/>Option 4</label></div>
</div>
</div>
</div>
<style type="text/css">#submitButton {
    white-space: normal;
  }

  .image {
    margin-bottom: 15px;
  }

  .panel-primary {
    margin: 10px;
  }

  /* CSS for breaking long words/urls */
  .dont-break-out {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  #hit-container {
    display: none;
  }

  #hit-instruction,
  #SurveyLink {
    display: inline-flex;
    vertical-align: top;
  }

  #hit-instruction {
    width: 20%;
  }

  #SurveyLink {
    width: 55%;
  }
</style>
<!-- Close internal style sheet --><!-- External JS references --><script src="https://code.jquery.com/jquery-3.1.0.min.js"
  integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"
  integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4" crossorigin="anonymous"></script><!-- Open internal javascript --><script></script>
<p>&nbsp;</p>
<script>

  var assignmentIdInPreviewMode = 'ASSIGNMENT_ID_NOT_AVAILABLE';

  function getAssignmentId() {
    return getParam("assignmentId");
  }

  function getParam(param) {
    var searchingParam = document.location.search;
    searchingParam = searchingParam.substr(searchingParam.indexOf(param) + param.length + 1).split('&')[0];
    return searchingParam || assignmentIdInPreviewMode;
  }

  document.addEventListener('DOMContentLoaded', function () {

    // To show preview
    if (getAssignmentId() === assignmentIdInPreviewMode) {
      document.getElementById('preview').style.display = 'block';
    } else {
      document.getElementById('hit-container').style.display = 'block';
    }

    // To make instructions scrollable
    var instructionsContainer = document.getElementById('instructions');
    if (instructionsContainer.clientHeight > 200) {
      instructionsContainer.style.height = '200px';
      instructionsContainer.style.overflowY = 'scroll';
    }

    // To make left instrunctions scrollable
    var leftInstructionContainer = document.getElementById('instructionBody');
    if (leftInstructionContainer.clientHeight > 600) {
      leftInstructionContainer.style.height = '600px';
      leftInstructionContainer.style.overflowY = 'scroll';
    }

  }, false);

</script>
